<template>
  <view class="py-4">
    <!-- 搜索框 -->
    <view class="px-4">
      <u-search v-model="state.searchKeyword" shape="square" :show-action="false" height="72" bg-color="#fff" color="#333"
        border-color="#F6F6F6" :input-style="searchInputStyle" placeholder-color="#999" placeholder="搜索国家"
        @search="loadData" @clear="loadData" />
    </view>
    <view class="mt-3 mx-4 relative bg-white rounded-2">
      <view v-for="(item, index) in state.list" :key="index" class="p-3 u-border-bottom" @click="onItemClick(item)">{{ item.name }}</view>
    </view>
  </view>
</template>

<script setup>
import { refreshPrePage } from '@/common/util/util'
import { getCountryList } from '@/common/http/module/common'

const state = reactive({
  searchKeyword: '',
  list: []
})

function loadData() {
  getCountryList(state.searchKeyword).then(res => {
    state.list = res.data
  })
}

function onItemClick(item) {
  refreshPrePage('onCountrySelected', item)
  uni.navigateBack()
}

onLoad(() => loadData())
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>